<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style type="text/css">
			.pic-list {
				width: 100%;
				/*background: url(images/muwu.jpg) no-repeat;*/
			}
			
			.pic-list:hover {
				background-color: #fff;
			}
			
			.pic-item {
				margin: 0 auto;
				margin-top: 15px;
				border: solid 1px #ccc;
				border-radius: 8px;
				width: 224px;
				height: 140px;
				text-align: center;
				vertical-align: middle;
				line-height: 140px;
				background-repeat: no-repeat;
				background-size: cover;
			}
			
			.pic-item>div {
				border-radius: 7px;
				background-color: rgba(255, 255, 255, .9);
				background-repeat: no-repeat;
				background-size: cover;
				font-weight: bold;
				color: #666;
			}
			
			.pic-item:first-child {
				margin-top: 0;
			}
			
			.user {}
			
			.user-headimg {
				font-size: 60px;
				color: #666;
				margin-right: 10px;
			}
			
			.user-info{
				padding-top: 12px;
			}
			
			.mui-table-view .mui-table-view-cell span#TStatus{
				margin-top: 18px;
				border-radius: 6px;
				font-size: 12px;
				padding: 0 4px;
				background: #F0AD4E;
				color: #fff;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">保存</a>
			<h1 class="mui-title">实名认证</h1>
		</header>
		<div class="mui-content">
			<div id="boxEdit" style="display: none;">
				<form id='login-form' class="mui-input-group mui-margin-top">
					<div class="mui-input-row">
						<label>姓名</label>
						<input id='Realname' type="text" class="mui-input-clear mui-input" maxlength="30" placeholder="请输入真实姓名">
					</div>
					<div class="mui-input-row">
						<label>身份证号码</label>
						<input id='IDNo' type="text" class="mui-input-clear mui-input" maxlength="30" placeholder="请输入身份证号码">
					</div>
				</form>
				<ul class="mui-table-view mui-panel">
					<li class="mui-table-view-cell">证件照片</li>
					<li class="mui-table-view-cell pic-list">
						<div class="pic-item" style="background-image: url(images/11.jpg);">
							<div id="Img1"><span class="mui-icon mui-icon-plus"></span>身份证正面</div>
						</div>
						<div class="pic-item" style="background-image: url(images/22.jpg);">
							<div id="Img2"><span class="mui-icon mui-icon-plus"></span>身份证反面</div>
						</div>
					</li>
				</ul>
			</div>

			<div id="boxRead" class="">
				<ul class="mui-table-view mui-margin-top">
					<li class="mui-table-view-cell user">
						<span class="mui-icon mui-icon-contact mui-pull-left user-headimg"></span>
						<div class="mui-pull-left user-info">
							<span id="TRealname"></span>
							<p id="TIDNo"></p>
						</div>
						<span class="mui-pull-right" id="TStatus"></span>
					</li>
				</ul>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/pic/binaryajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/pic/exif.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/pic/canvasResize.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/resources.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();

			// 全局数组对象，添加文件,用于压缩上传使用
			var imgs = new Array();
			var user = app.getUserInfo();

			init = function () {
				console.log(JSON.stringify(user));
				if(user.AuthenticationStatus == 9 || user.AuthenticationStatus == 3) {
					document.getElementById("boxRead").style.display = "none";
					document.getElementById("boxEdit").style.display = "inline"; 
					
					mui(".pic-item div").each(function(i, v) {
						v.addEventListener('tap', function() {
							galleryImg(this);
						});
					});

					document.getElementById("submit").addEventListener('tap', function() {
						save();
					});
				} else {
					document.getElementById("boxRead").style.display = "inline";
					document.getElementById("boxEdit").style.display = "none";
					document.getElementById("submit").style.display = "none";
				
					document.getElementById("TRealname").innerText = user.Realname;
					document.getElementById("TIDNo").innerText = user.IDNo.substr(0, 4) + "**********" + user.IDNo.substr(user.IDNo.length-4);
					document.getElementById("TStatus").innerHTML = resources.GetCertifiedStatusText(user.AuthenticationStatus);
				}				
			}

			//上传单张图片
			function galleryImg(obj) {
				// 从相册中选择图片
				mui.toast("从相册中选择一张图片");
				plus.gallery.pick(function(path) {
					showImg(path, obj);
				}, function(e) {
					mui.toast("取消选择图片");
				}, {
					filter: "image",
					multiple: false
				});
			}

			function galleryImgs() {
				//每次拍摄或选择图片前清空数组对象
				imgs.splice(0, imgs.length);
				document.getElementsByClassName("showimg")[0].innerHTML = null;
				// 从相册中选择图片
				mui.toast("从相册中选择不超过两张图片");
				plus.gallery.pick(function(e) {
					if(e.files.length != 2) {
						mui.toast('请选择身份证正面和背面照片共两张');
						return false;
					}
					for(var i in e.files) {
						showImg(e.files[i]);
					}
				}, function(e) {
					mui.toast("取消选择图片");
				}, {
					filter: "image",
					multiple: true
				});
			}

			// 拍照添加文件
			function cameraimages() {
				//每次拍摄或选择图片前清空数组对象
				imgs.splice(0, imgs.length);
				document.getElementsByClassName("showimg")[0].innerHTML = null;
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p) {
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
						var localurl = entry.toLocalURL(); //把拍照的目录路径，变成本地url路径，例如file:///........之类的。
						showImg(localurl);
					});
				}, function(e) {
					mui.toast("很抱歉，获取失败 " + e);
				});
			}

			function showImg(url, obj) {
				// 兼容以“file:”开头的情况
				if(0 != url.toString().indexOf("file://")) {
					url = "file://" + url;
				}
				var _div_ = obj;
				var _img_ = new Image();
				_img_.src = url; // 传过来的图片路径在这里用。
				_img_.onclick = function() {
					plus.runtime.openFile(url);
				};
				_img_.onload = function() {
					var tmph = _img_.height;
					var tmpw = _img_.width;
					var isHengTu = tmpw > tmph;
					var max = Math.max(tmpw, tmph);
					var min = Math.min(tmpw, tmph);
					var bili = min / max;
					if(max > 1200) {
						max = 1200;
						min = Math.floor(bili * max);
					}
					tmph = isHengTu ? min : max;
					tmpw = isHengTu ? max : min;
					_img_.style.border = "1px solid rgb(200,199,204)";
					_img_.style.margin = "10px";
					_img_.style.width = "150px";
					_img_.style.height = "150px";
					_img_.onload = null;
					plus.io.resolveLocalFileSystemURL(url, function(entry) {
							entry.file(function(file) {
								console.log(file.size + '--' + file.name);
								canvasResize(file, {
									width: tmpw,
									height: tmph,
									crop: false,
									quality: 50, //压缩质量
									rotate: 0,
									callback: function(data, width, height) {
										obj.setAttribute("data-value", data);
										obj.style.cssText = "background-image: url(" + data + ");color:rgba(0,0,0,.2)";
										//_div_.appendChild(_img_);
										mui.hideLoading();
									}
								});
							});
						},
						function(e) {
							mui.hideLoading();
							console.log(e.message);
						});
				};
			};

			function save() {
				var name = document.getElementById("Realname").value;
				var id = document.getElementById("IDNo").value;
				var img1 = document.getElementById("Img1").getAttribute("data-value") || "";
				var img2 = document.getElementById("Img2").getAttribute("data-value") || "";

				if(name == "" || id == "") {
					mui.toast("请输入");
					return;
				}
				if(img1 == "" || img2 == "") {
					mui.toast("请选择证件照片");
					return;
				}
				
				plus.nativeUI.showWaiting();

				app.post("Authentication", {
					MemberAccount: app.account(),
					Name: name,
					IDNo: id,
					Img1: img1,
					Img2: img2
				}, function(data) {
					if(data.isSuccess) {
						user.AuthenticationStatus = 0;
						user.Realname = name;
						user.IDNo = id;
						app.setUserInfo(user);
						init();
						mui.toast("实名认证提交成功，请等待审核");
						plus.webview.getWebviewById("account.html").evalJS("setAuthenticationStatus(0)");
					} else {
						mui.toast(data.message);
					}
				});
			};
			
			init();
		</script>
	</body>

</html>